<template>
  <el-cascader
    :options="options"
    ref="selectRef"
    @change="handleChange"
    v-model="dataValue"
  />
</template>

<script lang="ts" name="FormOptionCascader" setup>
import { nextTick, ref, watch } from "vue";
import { useFormOption } from "@/views/formgen/components/FormItem/hooks/useFormOptionHook";
import { cloneDeep } from "lodash-es";

const props = defineProps({
  value: {
    type: Array,
    default: () => []
  },
  item: {
    type: Object,
    default: () => {}
  }
});
const dataValue = ref(cloneDeep(props.value));
const options = ref<any[]>([]);

const formOptions = useFormOption();

const getOptions = async (item: any) => {
  if (!item) {
    return;
  }
  const config = item.config;
  if (config!.optionsType == 0) {
    options.value = config!.options;
  } else {
    options.value = await formOptions.getOptions(config);
  }
};

watch(
  () => props.item,
  val => {
    if (val && val.field) {
      getOptions(props.item?.field?.scheme);
    }
  },
  {
    immediate: true,
    deep: true
  }
);

const selectRef = ref<any>(null);

const emit = defineEmits(["update:value", "change-label"]);

const handleChange = () => {
  emit("update:value", cloneDeep(dataValue.value));
  nextTick(() => {
    console.log(selectRef.value.getCheckedNodes());
  });
  emit("change-label", selectRef.value.getCheckedNodes()[0]?.pathLabels);
};
</script>

<style lang="scss" scoped></style>
